<template>
  <el-button style="float: left; position: absolute; z-index: 10;" text @click="configRef.show()"
    v-if="selectId && loginInfo.userId == 1300000000101"></el-button>
  <el-select-v2 v-bind="$attrs" :options="items" :disabled="!isEdit" clearable placeholder="" />
  <SelectItemConfig ref="configRef" :options="options" :selectId="selectId" @uploadOptions="uploadOptions">
  </SelectItemConfig>
</template>

<script lang="ts" setup>
/* 可以自定义选项的Select组件
 用法: 
<el-form-item prop="xingBie" label="性别">
  <MkSelectNoLabel v-model="ctx.xingBie" :isEdit="ctx.IsEdit" :options="['男', '女']" selectId="KuaiSuFaXue_XingBie" />  
</el-form-item>  
*/
import { loginInfo } from '/@/stores/baseInfo/';
import SelectItemConfig from './SelectItemConfig.vue';

defineOptions({
  name: 'MkSelectNoLabel'
})

export interface SelectItem {
  value: string;
  label: string;
}

export interface TableItem {
  label: string;
}

const props = defineProps({
  isEdit: {
    type: Boolean,
    default: true
  },
  selectId: {
    // 选择框的id, 用于缓存选项, 
    // 未设置selectId时, 不缓存选项, 
    // 如果两个MkSelect的selectId相同, 则会共享选项
    type: String,
  },
  options: { // 默认选项
    type: Array<string>,
  },
})

const items = ref([] as SelectItem[]); // 选项列表
const configRef = ref(); // 用于编辑选项的表格

const uploadOptions = (options: any) => {
  items.value = options;
}

</script>